<template>
  <div class="logistics-tracking">
    <div class="container">
      <el-card class="tracking-card">
        <template #header>
          <div class="card-header">
            <h2>物流追踪</h2>
            <div class="order-info">
              <span>订单号: {{ orderInfo.orderNo }}</span>
              <span>下单时间: {{ formatDate(orderInfo.createTime) }}</span>
              <el-button @click="goBack" size="small">返回订单详情</el-button>
            </div>
          </div>
        </template>
        
        <div v-loading="loading" element-loading-text="加载物流信息中...">
          <!-- 商品列表区域 -->
          <div class="item-list">
            <h3>包裹商品</h3>
            <el-tabs v-model="activeItemId" @tab-change="handleItemChange" type="card">
              <el-tab-pane 
                v-for="item in orderItems" 
                :key="item.id" 
                :label="item.name" 
                :name="String(item.id)"
              >
                <div class="item-info">
                  <el-image :src="item.image" class="item-image" />
                  <div class="item-details">
                    <h4>{{ item.name }}</h4>
                    <p>数量: {{ item.quantity || 0 }}</p>
                    <p>价格: ¥{{ item.price ? item.price.toFixed(2) : '0.00' }}</p>
                    <p v-if="shopInfo">
                      店铺: {{ shopInfo.name }}
                    </p>
                    <p v-if="logistics">
                      物流公司: {{ logistics.company }}
                      <span v-if="logistics.trackingNo && logistics.trackingNo !== '暂无'"> | 运单号: {{ logistics.trackingNo }}</span>
                    </p>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <!-- 当前商品物流信息 -->
          <div class="current-logistics" v-if="logistics">
            <!-- 店铺信息 -->
            <div class="shop-info" v-if="shopInfo">
              <h3>店铺信息</h3>
              <div class="shop-details">
                <el-image v-if="shopInfo.image" :src="shopInfo.image" class="shop-image" />
                <div class="shop-text">
                  <h4>{{ shopInfo.name }}</h4>
                  <p v-if="shopInfo.address">地址: {{ shopInfo.area }} {{ shopInfo.address }}</p>
                  <p v-if="shopInfo.phone">联系电话: {{ shopInfo.phone }}</p>
                  <p v-if="shopInfo.openHours">营业时间: {{ shopInfo.openHours }}</p>
                </div>
              </div>
            </div>
            
            <!-- 地图显示区域 -->
            <div class="map-container">
              <h3>物流路径</h3>
              
              <!-- 单一地图显示 -->
              <div id="logistics-map" class="amap-container"></div>
            </div>
            
            <!-- 物流详情时间线 -->
            <div class="tracking-details" v-if="logistics.trackingInfo && logistics.trackingInfo.length">
              <h3>物流详情</h3>
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in logistics.trackingInfo"
                  :key="index"
                  :timestamp="item.time"
                  :type="getTimelineType(index)"
                >
                  <div class="timeline-content">
                    <div class="timeline-status">{{ item.status }}</div>
                    <div class="timeline-description">{{ item.description }}</div>
                    <div class="timeline-location" v-if="item.location">{{ item.location }}</div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          
          <div v-else class="no-logistics">
            <el-empty description="暂无物流信息，请稍后再试" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getLogisticsByItemId } from '@/api/logistics'
import { geocodeAddress, generateSimulatedPath, getRoutePath } from '@/utils/mapUtils'

// 重命名API方法，更准确地反映其功能
const getItemAndShopInfo = getLogisticsByItemId

// 生成随机物流信息
const generateRandomLogistics = (shopInfo) => {
  // 随机物流公司
  const companies = ['顺丰速运', '京东物流', '圆通速递', '中通快递', '韵达快递', '申通快递'];
  const company = companies[Math.floor(Math.random() * companies.length)];
  
  // 生成随机运单号
  const generateTrackingNo = () => {
    let result = '';
    const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (let i = 0; i < 12; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return company.substring(0, 2).toUpperCase() + result;
  };
  
  // 生成随机物流状态和时间
  const generateTrackingInfo = () => {
    const now = new Date();
    const statuses = [
      {
        time: new Date(now.getTime() - 1000 * 60 * 60 * 2).toLocaleString(),
        status: '运输中',
        description: '快件在运输中',
        location: '配送中心'
      },
      {
        time: new Date(now.getTime() - 1000 * 60 * 60 * 12).toLocaleString(),
        status: '已发货',
        description: '商家已发货',
        location: shopInfo?.area || '发货地'
      },
      {
        time: new Date(now.getTime() - 1000 * 60 * 60 * 24).toLocaleString(),
        status: '已打包',
        description: '商品已打包完毕',
        location: shopInfo?.area || '发货地'
      },
      {
        time: new Date(now.getTime() - 1000 * 60 * 60 * 36).toLocaleString(),
        status: '已下单',
        description: '订单已生成',
        location: '系统'
      }
    ];
    
    return statuses;
  };
  
  return {
    company,
    trackingNo: generateTrackingNo(),
    trackingInfo: generateTrackingInfo()
  };
};

export default {
  name: 'LogisticsTracking',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    // 地图实例
    let map = null
    
    // 加载状态
    const loading = ref(true)
    
    // 订单信息
    const orderInfo = ref({})
    
    // 商品列表
    const orderItems = ref([])
    
    // 当前选中的商品ID
    const activeItemId = ref('')
    
    // 物流信息
    const logistics = ref(null)
    
    // 店铺信息
    const shopInfo = ref(null)
    
    // 初始化数据
    const initData = () => {
      try {
        const orderId = route.params.orderId
        
        // 解析URL参数中的收件人信息和订单项列表
        if (route.query.orderItems) {
          orderItems.value = JSON.parse(route.query.orderItems || '[]')
        }
        
        if (route.query.recipientInfo) {
          const recipientInfo = JSON.parse(route.query.recipientInfo || '{}')
          
          // 检查地址是否有效
          let validAddress = recipientInfo.address || '北京市'
          // 如果地址是纯数字，替换为默认地址
          if (/^\d+$/.test(validAddress)) {
            validAddress = '北京市朝阳区'
            console.log('检测到无效地址(纯数字)，使用默认地址:', validAddress)
          }
          
          // 提取省市信息
          const province = extractProvince(validAddress)
          let city = extractCity(validAddress)
          
          // 特殊处理内蒙古地区
          if (validAddress.includes('内蒙古') && validAddress.includes('乌海')) {
            city = '乌海市'
          }
          
          console.log('提取的省份:', province)
          console.log('提取的城市:', city)
          
          orderInfo.value = {
            ...orderInfo.value,
            recipientName: recipientInfo.name,
            recipientPhone: recipientInfo.phone,
            recipientAddress: validAddress,
            // 从地址中提取省市信息
            province: province,
            city: city
          }
          console.log('解析的收货地址信息:', orderInfo.value)
        }
        
        // 设置默认选中的商品
        if (route.query.defaultItemId) {
          activeItemId.value = route.query.defaultItemId
        } else if (orderItems.value.length > 0) {
          activeItemId.value = String(orderItems.value[0].id)
        }
        
        // 加载物流信息
        if (activeItemId.value) {
          fetchItemInfo(activeItemId.value)
        } else {
          loading.value = false
        }
      } catch (error) {
        console.error('初始化数据失败:', error)
        ElMessage.error('初始化数据失败')
        loading.value = false
      }
    }
    
    // 从地址中提取省份信息
    const extractProvince = (address) => {
      if (!address) return ''
      
      // 特殊处理自治区
      if (address.includes('内蒙古自治区') || address.includes('内蒙古')) {
        return '内蒙古自治区'
      }
      if (address.includes('新疆维吾尔自治区') || address.includes('新疆')) {
        return '新疆维吾尔自治区'
      }
      if (address.includes('西藏自治区') || address.includes('西藏')) {
        return '西藏自治区'
      }
      if (address.includes('宁夏回族自治区') || address.includes('宁夏')) {
        return '宁夏回族自治区'
      }
      if (address.includes('广西壮族自治区') || address.includes('广西')) {
        return '广西壮族自治区'
      }
      
      // 常见省份后缀
      const provinceSuffixes = ['省', '自治区', '市', '特别行政区']
      
      for (const suffix of provinceSuffixes) {
        const index = address.indexOf(suffix)
        if (index > 0 && index < 5) {
          return address.substring(0, index + suffix.length)
        }
      }
      
      // 如果没有找到明确的省份标识，尝试提取前2-3个字符作为省份
      if (address.length >= 2) {
        // 检查是否是纯数字地址
        if (/^\d+$/.test(address)) {
          return '北京市' // 如果是纯数字，使用默认省份
        }
        return address.substring(0, Math.min(3, address.length))
      }
      
      return ''
    }
    
    // 从地址中提取城市信息
    const extractCity = (address) => {
      if (!address) return ''
      
      // 检查是否是纯数字地址
      if (/^\d+$/.test(address)) {
        return '北京市' // 如果是纯数字，使用默认城市
      }
      
      // 特殊处理内蒙古地区
      if (address.includes('内蒙古')) {
        // 尝试提取内蒙古的城市
        const cities = ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '兴安盟', '锡林郭勒盟', '阿拉善盟']
        for (const city of cities) {
          if (address.includes(city)) {
            return city + '市'
          }
        }
        // 如果没有找到具体城市，默认使用呼和浩特
        return '呼和浩特市'
      }
      
      // 移除可能的省份部分
      let processedAddress = address
      const province = extractProvince(address)
      if (province) {
        processedAddress = address.substring(province.length)
      }
      
      // 查找"市"字
      const cityIndex = processedAddress.indexOf('市')
      if (cityIndex > 0 && cityIndex < 10) {
        return processedAddress.substring(0, cityIndex + 1)
      }
      
      // 如果没有找到明确的城市标识，尝试提取前2-3个字符作为城市
      if (processedAddress.length >= 2) {
        return processedAddress.substring(0, Math.min(3, processedAddress.length)) + '市'
      }
      
      return '北京市' // 默认返回北京市
    }
    
    // 获取商品和店铺信息
    const fetchItemInfo = async (itemId) => {
      try {
        loading.value = true
        const res = await getItemAndShopInfo(itemId)
        
        console.log('API响应数据:', res)
        
        if (res) {
          // 提取店铺信息
          shopInfo.value = res.shopDTO || null
          console.log('提取的店铺信息:', shopInfo.value)
          
          // 生成随机物流信息
          logistics.value = generateRandomLogistics(shopInfo.value)
          console.log('生成的物流信息:', logistics.value)
          
          // 初始化地图
          nextTick(() => {
            // 延迟初始化地图，确保DOM已渲染
            setTimeout(() => {
              initMap()
            }, 500)
          })
        } else {
          console.error('API返回数据格式不正确:', res)
          ElMessage.error('获取商品信息失败')
        }
      } catch (error) {
        console.error('获取商品信息失败:', error)
        ElMessage.error('获取商品信息失败')
      } finally {
        loading.value = false
      }
    }
    
    // 初始化地图
    const initMap = async () => {
      // 确保物流信息和店铺信息存在
      if (!logistics.value || !shopInfo.value) {
        console.error('物流信息或店铺信息不存在，无法初始化地图')
        return
      }
      
      try {
        console.log('尝试初始化物流地图...')
        console.log('物流信息:', logistics.value)
        console.log('店铺信息:', shopInfo.value)
        
        // 检查DOM元素是否存在
        const mapContainer = document.getElementById('logistics-map')
        console.log('物流地图容器查找结果:', mapContainer)
        
        if (!mapContainer) {
          console.error('找不到#logistics-map元素，无法初始化地图')
          return
        }
        
        // 检查容器尺寸
        console.log('地图容器尺寸:', mapContainer.offsetWidth, mapContainer.offsetHeight)
        if (mapContainer.offsetWidth === 0 || mapContainer.offsetHeight === 0) {
          console.error('地图容器尺寸为0，地图无法正常显示')
        }
        
        // 确保高德地图API已加载
        if (typeof AMap === 'undefined') {
          console.error('高德地图API未加载')
          return
        }
        
        // 清除之前的地图实例
        if (map) {
          console.log('销毁之前的地图实例')
          map.destroy()
          map = null
        }
        
        // 延迟创建地图实例
        console.log('准备创建地图实例...')
        setTimeout(async () => {
          try {
            console.log('开始创建地图实例，容器ID:', 'logistics-map')
            
            // 创建地图实例
            map = new AMap.Map('logistics-map', {
              zoom: 5,
              center: [116.397428, 39.90923],
              viewMode: '2D',
              resizeEnable: true
            })
            
            console.log('物流地图实例创建成功:', map)
            
            // 添加地图控件
            map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
              map.addControl(new AMap.ToolBar())//工具栏
              map.addControl(new AMap.Scale())//比例尺
            })
            
            // 获取发货地址（店铺地址）
            let shopCity = ''
            if (shopInfo.value.area) {
              // 从店铺area字段提取城市
              shopCity = shopInfo.value.area.split('市')[0]
              if (!shopCity.endsWith('市')) {
                shopCity += '市'
              }
            } else if (shopInfo.value.address) {
              // 尝试从地址中提取城市
              const city = extractCity(shopInfo.value.address)
              if (city) {
                shopCity = city
              } else {
                shopCity = '北京市' // 默认城市
              }
            } else {
              shopCity = '北京市' // 默认城市
            }
            
            // 获取收货地址
            let recipientCity = ''
            if (orderInfo.value.city) {
              // 检查是否是有效的城市名称（不是纯数字）
              if (!/^\d+市$/.test(orderInfo.value.city)) {
                recipientCity = orderInfo.value.city
                if (!recipientCity.endsWith('市') && recipientCity.length > 0) {
                  recipientCity += '市'
                }
              } else {
                console.warn('检测到无效的城市名称:', orderInfo.value.city)
                recipientCity = '北京市' // 使用默认城市
              }
            } else if (orderInfo.value.recipientAddress) {
              // 尝试从完整地址中提取城市
              recipientCity = extractCity(orderInfo.value.recipientAddress)
              if (!recipientCity) {
                recipientCity = '北京市' // 默认收货城市
              }
            } else {
              recipientCity = '北京市' // 默认收货城市
            }
            
            console.log('发货城市:', shopCity)
            console.log('收货城市:', recipientCity)
            
            if (shopCity && recipientCity) {
              try {
                console.log('开始获取地理编码...')
                // 获取起点经纬度
                let startPosition = await geocodeAddress(shopCity).catch(err => {
                  console.error('起点地址解析失败:', err)
                  return [116.397428, 39.90923] // 北京默认坐标
                })
                
                // 获取终点经纬度
                let endPosition = await geocodeAddress(recipientCity).catch(err => {
                  console.error('终点地址解析失败:', err)
                  return [121.473701, 31.230416] // 上海默认坐标
                })
                
                // 验证经纬度有效性
                if (!startPosition || !Array.isArray(startPosition) || startPosition.length !== 2) {
                  console.warn('起点坐标无效，使用默认坐标')
                  startPosition = [116.397428, 39.90923]
                }
                
                if (!endPosition || !Array.isArray(endPosition) || endPosition.length !== 2) {
                  console.warn('终点坐标无效，使用默认坐标')
                  endPosition = [121.473701, 31.230416] // 上海默认坐标
                }
                
                console.log('起点坐标:', startPosition)
                console.log('终点坐标:', endPosition)
                
                // 使用高德地图API获取路径
                console.log('开始获取路径规划...')
                let pathPoints = await getRoutePath(startPosition, endPosition)
                console.log('获取到的路径点数量:', pathPoints.length)
                
                // 创建起点标记
                console.log('创建起点标记')
                const startMarker = new AMap.Marker({
                  position: startPosition,
                  icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
                  title: '发货地点: ' + shopCity
                })
                
                // 创建终点标记
                console.log('创建终点标记')
                const endMarker = new AMap.Marker({
                  position: endPosition,
                  icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
                  title: '收货地点: ' + recipientCity
                })
                
                // 创建物流车辆标记
                console.log('创建物流车辆标记')
                const middlePointIndex = Math.floor(pathPoints.length / 2)
                const truckPosition = pathPoints[middlePointIndex] || [(startPosition[0] + endPosition[0]) / 2, (startPosition[1] + endPosition[1]) / 2]
                
                const truckMarker = new AMap.Marker({
                  position: truckPosition,
                  icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                  title: '物流车辆'
                })
                
                // 创建路径线
                console.log('创建路径线')
                const polyline = new AMap.Polyline({
                  path: pathPoints,
                  strokeColor: '#3366FF',
                  strokeWeight: 6,
                  strokeOpacity: 0.8
                })
                
                // 将覆盖物添加到地图
                console.log('添加覆盖物到地图')
                map.add([startMarker, endMarker, truckMarker, polyline])
                
                // 调整视野以包含所有点
                console.log('调整地图视野')
                map.setFitView([startMarker, endMarker, polyline])
              } catch (error) {
                console.error('地图路径绘制失败:', error)
                // 即使路径绘制失败，也确保地图能显示
                map.setCenter([116.397428, 39.90923])
                map.setZoom(5)
              }
            } else {
              console.warn('地址信息不完整，使用默认位置')
              map.setCenter([116.397428, 39.90923])
              map.setZoom(5)
            }
            
            // 手动触发一次resize，确保地图正确渲染
            setTimeout(() => {
              console.log('手动触发地图resize')
              if (map && typeof map.resize === 'function') {
                map.resize()
              }
            }, 1000)
            
          } catch (error) {
            console.error('创建物流地图实例失败:', error)
          }
        }, 500)
      } catch (error) {
        console.error('初始化地图失败:', error)
      }
    }
    
    // 检查是否需要添加中转点（针对跨海路线）
    const checkNeedTransitPoints = (start, end) => {
      // 检查是否是跨越东海的路线（如上海到台湾、福建到浙江等）
      const isEastSeaCrossing = (
        // 东西方向跨度大
        Math.abs(end[0] - start[0]) > 3 &&
        // 且位于东部沿海地区
        ((start[0] > 118 && end[0] > 118) || 
         (start[1] < 35 && end[1] < 35))
      )
      
      // 检查是否是跨越南海的路线
      const isSouthSeaCrossing = (
        // 南北方向跨度大
        Math.abs(end[1] - start[1]) > 5 &&
        // 且位于南部沿海地区
        ((start[0] > 110 && start[1] < 25) || 
         (end[0] > 110 && end[1] < 25))
      )
      
      return isEastSeaCrossing || isSouthSeaCrossing
    }
    
    // 生成中转点（针对跨海路线）
    const generateTransitPoints = (start, end) => {
      const transitPoints = []
      
      // 东西方向的距离
      const eastWestDistance = end[0] - start[0]
      // 南北方向的距离
      const northSouthDistance = end[1] - start[1]
      
      // 如果是跨越东海的路线（如上海到台湾）
      if (eastWestDistance > 3 && start[0] > 118 && end[0] > 118) {
        // 添加沿海中转点
        transitPoints.push([
          start[0] + eastWestDistance * 0.3,
          start[1] + northSouthDistance * 0.2
        ])
        
        // 添加第二个中转点，确保路径沿着陆地
        transitPoints.push([
          start[0] + eastWestDistance * 0.7,
          start[1] + northSouthDistance * 0.6
        ])
      }
      // 如果是跨越南海的路线
      else if (Math.abs(northSouthDistance) > 5 && (start[1] < 25 || end[1] < 25)) {
        // 添加沿陆地的中转点
        transitPoints.push([
          start[0] + eastWestDistance * 0.3,
          start[1] + northSouthDistance * 0.3
        ])
        
        // 添加第二个中转点
        transitPoints.push([
          start[0] + eastWestDistance * 0.7,
          start[1] + northSouthDistance * 0.7
        ])
      }
      // 如果是从北方到南方的长距离路线
      else if (Math.abs(northSouthDistance) > 10) {
        // 添加中间中转点
        transitPoints.push([
          start[0] + eastWestDistance * 0.5,
          start[1] + northSouthDistance * 0.5
        ])
      }
      // 如果是从东部到西部的长距离路线
      else if (Math.abs(eastWestDistance) > 10) {
        // 添加中间中转点
        transitPoints.push([
          start[0] + eastWestDistance * 0.5,
          start[1] + northSouthDistance * 0.5
        ])
      }
      
      return transitPoints
    }
    
    // 处理商品切换
    const handleItemChange = (itemId) => {
      fetchItemInfo(itemId)
    }
    
    // 返回订单详情
    const goBack = () => {
      router.back()
    }
    
    // 格式化日期
    const formatDate = (date) => {
      if (!date) return '暂无'
      try {
        const localDate = new Date(date)
        return localDate.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        })
      } catch (error) {
        console.error('日期格式化失败:', error)
        return '日期格式错误'
      }
    }
    
    // 获取时间线类型
    const getTimelineType = (index) => {
      if (index === 0) return 'success'
      return 'primary'
    }
    
    // 手动触发地图容器调整大小
    const resizeMaps = () => {
      if (map) {
        map.resize()
      }
    }
    
    // 监听窗口大小变化，调整地图大小
    window.addEventListener('resize', resizeMaps)
    
    // 组件挂载时初始化数据
    onMounted(() => {
      initData()
    })
    
    // 组件卸载时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', resizeMaps)
      if (map) {
        map.destroy()
        map = null
      }
    })
    
    return {
      loading,
      orderInfo,
      orderItems,
      activeItemId,
      logistics,
      shopInfo,
      handleItemChange,
      goBack,
      formatDate,
      getTimelineType
    }
  }
}
</script>

<style lang="scss" scoped>
.logistics-tracking {
  padding: 20px 0;
  background-color: #f5f5f5;
  min-height: calc(100vh - 200px);
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.tracking-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h2 {
      margin: 0;
      color: #303133;
    }
    
    .order-info {
      display: flex;
      align-items: center;
      gap: 20px;
      
      span {
        color: #606266;
        font-size: 14px;
      }
    }
  }
}

.item-list {
  margin-bottom: 20px;
  
  h3 {
    margin-bottom: 15px;
    color: #303133;
  }
  
  .item-info {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    
    .item-image {
      width: 100px;
      height: 100px;
      object-fit: cover;
      margin-right: 20px;
      border-radius: 4px;
    }
    
    .item-details {
      h4 {
        margin: 0 0 10px 0;
        color: #303133;
      }
      
      p {
        margin: 5px 0;
        color: #606266;
      }
    }
  }
}

.current-logistics {
  // 店铺信息样式
  .shop-info {
    margin-bottom: 20px;
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    
    h3 {
      margin-top: 0;
      margin-bottom: 15px;
      color: #303133;
    }
    
    .shop-details {
      display: flex;
      align-items: flex-start;
      
      .shop-image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
      }
      
      .shop-text {
        h4 {
          margin: 0 0 10px 0;
          color: #303133;
          font-size: 16px;
        }
        
        p {
          margin: 5px 0;
          color: #606266;
          font-size: 14px;
        }
      }
    }
  }
  
  .logistics-status {
    margin-bottom: 20px;
    
    .status-info {
      background-color: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      
      h3 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #303133;
      }
      
      .status-details {
        display: flex;
        align-items: center;
        
        .status-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
          font-size: 24px;
          
          &.status-pending {
            background-color: #e6a23c;
            color: #fff;
          }
          
          &.status-shipping {
            background-color: #409eff;
            color: #fff;
          }
          
          &.status-delivered {
            background-color: #67c23a;
            color: #fff;
          }
          
          &.status-unknown {
            background-color: #909399;
            color: #fff;
          }
        }
        
        .status-text {
          .status {
            font-size: 18px;
            font-weight: bold;
            color: #303133;
            margin: 0 0 5px 0;
          }
          
          p {
            margin: 5px 0;
            color: #606266;
          }
        }
      }
    }
  }
  
  .map-container {
    margin-bottom: 20px;
    
    h3 {
      margin-bottom: 15px;
      color: #303133;
    }
    
    .amap-container {
      width: 100%;
      height: 400px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
    }
    
    .map-error {
      padding: 20px;
      text-align: center;
      background-color: #fef0f0;
      border-radius: 4px;
      margin-top: 10px;
      
      p {
        color: #f56c6c;
        margin-bottom: 15px;
      }
    }
  }
  
  .tracking-details {
    h3 {
      margin-bottom: 15px;
      color: #303133;
    }
    
    .timeline-content {
      .timeline-status {
        font-weight: bold;
        color: #303133;
        margin: 0 0 5px 0;
      }
      
      .timeline-description {
        color: #606266;
        margin: 5px 0;
      }
      
      .timeline-location {
        color: #909399;
        font-size: 13px;
        margin: 5px 0 0 0;
      }
    }
  }
}

.no-logistics {
  padding: 30px 0;
  text-align: center;
}

/* 控制标签页样式 */
:deep(.el-tabs__item) {
  height: 40px;
  line-height: 40px;
  
  &.is-active {
    color: #409eff;
    font-weight: bold;
  }
}

/* 控制时间线样式 */
:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 13px;
}

:deep(.el-timeline-item__node--primary) {
  background-color: #409eff;
}

:deep(.el-timeline-item__node--success) {
  background-color: #67c23a;
}

:deep(.el-timeline-item__node--warning) {
  background-color: #e6a23c;
}
</style>
